<template>
  <a-spin :spinning="loading">
    <a-layout id="baseLayout">
      <a-layout-header class="header">
        <img
          class="logo"
          src="https://file.tlwok.com/group1/M00/04/9D/CgsWD10CC-GAPwJSAAA5yR3ctto342.png"
        />

        <!-- theme="dark" -->

        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }"
          :selectedKeys="topMenuSelected.id ? [topMenuSelected.id] : []"
        >
          <a-menu-item
            v-for="item in topMenu"
            :key="item.id"
            @click="onClickMenu(item)"
          >{{item.name}}</a-menu-item>
        </a-menu>
      </a-layout-header>
      <a-layout style="flex: 1;padding: 0;">
        <a-layout-sider v-if="leftMenu.length > 0" class="left-menu" width="220px">
          <!-- theme="dark" -->
          <a-menu mode="inline" :style="{ height: '100%', border: 0 }" :openKeys.sync="leftOpenKeys">
            <a-sub-menu v-for="menu1 in leftMenu" :key="menu1.id">
              <span slot="title">
                <a-icon type="robot" />
                <span>{{menu1.name}}</span>
              </span>
              <template v-for="menu2 in menu1.children">
                <a-menu-item-group v-if="menu2.children && menu2.children.length" :key="menu2.id">
                  <template slot="title">
                    <span>{{menu2.name}}</span>
                  </template>
                  <a-menu-item
                    v-for="menu3 in menu2.children"
                    :key="menu3.id"
                    @click="onClickMenu(menu3)"
                  >{{menu3.name}}</a-menu-item>
                </a-menu-item-group>
                <a-menu-item v-else :key="menu2.id" @click="onClickMenu(menu2)">{{menu2.name}}</a-menu-item>
              </template>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <!-- <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item>List</a-breadcrumb-item>
            <a-breadcrumb-item>App</a-breadcrumb-item>
          </a-breadcrumb>-->
          <a-layout-content :style="{ background: '#fff', margin: 0, minHeight: '280px' }">
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </a-spin>
</template>
<script>
import { getMenu } from "@/api/";

export default {
  data() {
    return {
      collapsed: false,
      loading: false,
      allMenu: [],
      menu: null,
      topMenuSelected: {},
      leftOpenKeys: [],
    };
  },
  created() {
    this.getMenu();
  },
  computed: {
    topMenu() {
      return this.allMenu.map((item) => {
        let url = this.getTopMenuUrl(item);
        const temp = url.split("/")
        let startPath = temp[1] === 'subContent' ? temp[2] : temp[1];
        return {
          ...item,
          startPath,
          url,
        };
      });
    },
    leftMenu() {
      return this.topMenuSelected.children || [];
    },
  },
  watch: {
    $route() {
      this.topMenuSelected = this.getMenuSelected();
    },
    leftMenu() {
      this.leftOpenKeys = this.leftMenu.map((item) => item.id);
    },
  },
  methods: {
    getMenuSelected(url = null) {
      url = url ? url : (this.$route.meta.isWebView ? this.$route.query.p : this.$route.path)
      let currentStartPath = url.split("/")[1];
      for (let menu of this.topMenu) {
        if (currentStartPath === menu.startPath) {
          return menu;
        }
      }
      return this.topMenu[0];
    },
    getTopMenuUrl(item) {
      return item.children.length > 0
        ? this.getTopMenuUrl(item.children[0])
        : item.url;
    },
    async getMenu() {
      this.loading = true;
      this.allMenu = await getMenu();
      this.topMenuSelected = this.getMenuSelected();
      this.loading = false;
    },
    onClickMenu(item) {
      if (item.url.indexOf('/subContent/') === 0) {
        console.log('item.url', item.url)
        let urls = item.url.split('/')
        urls.splice(1, 1)
        let name = urls[1]
        let newUrl = urls.join('/')
        console.log('package', newUrl, name)
        this.$router.push(newUrl)
      } else {
        this.$router.push("/web/?p=" + item.url);
      }
    },
  },
};
</script>

<style>
#baseLayout {
  height: 100vh;
  overflow: hidden;
}

#baseLayout .logo {
  width: 120px;
  /* height: 31px; */
  /* background: rgba(255, 255, 255, 0.2); */
  margin: 14px 28px 14px 0;
  float: left;
}

#baseLayout .ant-menu-dark,
#baseLayout .header {
  background-color: #00a2ca;
}

#baseLayout .header .ant-menu-item-selected {
  background-color: #0095bb;
}

#baseLayout .header .ant-menu-dark .ant-menu-item {
  color: #ffffff;
}
#baseLayout .header .ant-menu-dark .ant-menu-item:hover {
  background-color: #0095bb;
}

#baseLayout .left-menu {
  background: #fff;
  overflow: auto;
}

#baseLayout .left-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

#baseLayout .left-menu::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 6px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  background: rgba(144,147,153,.3);
}

#baseLayout .left-menu::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  border-radius: 6px;
  background: transparent;
}
</style>